<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>库存管理</title>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../js/echarts.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 入库 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="out">出库</a>
        </script>
    </div>
</div>

<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-card-body">
            <div id="echarts-pies" style="width:600px;min-height:400px"></div>
        </div>
    </div>
</div>

<script src="../../lib/layui-v2.6.3/layui.js" type="text/javascript"></script>

<script>
    layui.use(['jquery','form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
        var documentWidth=$(document).width();
        table.render({
            elem: '#currentTableId',
            url: 'http://localhost:8081/warehouse/findAll',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox"},
                {field: 'id', title: 'ID'},
                {field: 'type', title: '设备类型'},
                {field: 'count', title: '数量'},
                {field: 'price', title: '单价',sort:true},
                {title: '操作', minWidth: 50, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });
        /**
         * toolbar监听事件
         */
        // 监听入库操作
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {
                var myDate = new Date();
                var time = myDate.toLocaleDateString();
                var date = myDate.toLocaleString().replaceAll("/","").replaceAll(":","").replaceAll("下","").replaceAll("午","").replaceAll("上","").replaceAll(" ","");;
                var index = layer.open({
                    title: '入库',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['45%', '65%'],
                    content: 'addin.html',
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        body.find('input[name=time]').val(time);
                        body.find('input[name=id]').val("RK"+date);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });
        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑库存',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['45%', '60%'],
                    content: 'editwarehouse.html',
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        body.find('input[name=id]').val(data.id);
                        body.find('input[name=type]').val(data.type);
                        body.find('input[name=count]').val(data.count);
                        body.find('input[name=price]').val(data.price);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
            else if (obj.event === 'out') {
                var myDate = new Date();
                var time = myDate.toLocaleDateString();
                var date = myDate.toLocaleString().replaceAll("/","").replaceAll(":","").replaceAll("下","").replaceAll("午","").replaceAll("上","").replaceAll(" ","");;
                var index = layer.open({
                    title: '出库',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['45%', '65%'],
                    content: 'addout.html',
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        body.find('input[name=id]').val("CK"+date);
                        body.find('input[name=time]').val(time);
                        body.find('input[name=type]').val(obj.data.type);
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        });

        var myChart = echarts.init(document.getElementById('echarts-pies'));

        // 指定图表的配置项和数据
        var option = {
            //backgroundColor: '#fbfff3',
            title: {
                text: '物资管理',
                left: 'center',
                // top: 20,
                // textStyle: {
                //     color: '#ccc'
                // }
            },

            // tooltip: {
            //     trigger: 'item'
            // },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '80%',
                    center: ['50%', '50%'],
                    data: [
                        {value: 394, name: 'IC卡',itemStyle: {color: '#2ac6ff'}},
                        {value: 300, name: '供气设备',itemStyle: {color: '#62a6ff'}},
                        {value: 200, name: '灭火器',itemStyle: {color: '#55ff00'}},
                        {value: 100, name: '燃气罐',itemStyle: {color: '#ffaa00'}},
                    ].sort(function (a, b) { return a.value - b.value; }),
                    //roseType: 'radius',
                    // label: {
                    //     color: 'rgba(255, 255, 255, 0.3)'
                    // },
                    // labelLine: {
                    //     lineStyle: {
                    //         color: 'rgba(255, 255, 255, 0.3)'
                    //     },
                    //     smooth: 0.2,
                    //     length: 10,
                    //     length2: 20
                    // },
                    // itemStyle: {
                    //     color: '#c23531',
                    //     shadowBlur: 200,
                    //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                    // },
                    // animationType: 'scale',
                    // animationEasing: 'elasticOut',
                    // animationDelay: function (idx) {
                    //     return Math.random() * 200;
                    // }
                }
            ]
        };
        myChart.setOption(option);
        // var IcCount=390;
        // var DevCount=290;
        // var mie=100;
        // var ran=200;
        //
        // $(document).ready(function() { //页面加载事件，加载完页面之后执行
        //     getData();
        // });
        // function getData() {
        //     // $.ajax({
        //     //     url: 'http://localhost:8081/warehouse/findAll',
        //     //     //data:JSON.stringify(data.field),
        //     //     type:"get",
        //     //     dataType:'json',
        //     //     contentType: "application/json;charset=utf-8",
        //     //     success: function (data) {
        //     //         layer.msg(data);
        //     //     }
        //     // })
        //     updateMyChart();
        // }
        // function updateMyChart(){
        //     myChart.setOption({
        //         series : [
        //             {
        //                 name: '访问来源',
        //                 type: 'pie',
        //                 radius: '80%',
        //                 data:[
        //                     {
        //                         value:IcCount,
        //                         itemStyle: {color: '#55aaff'},
        //                         name:'IC卡'
        //                     },
        //                     {
        //                         value:DevCount,
        //                         itemStyle: {color: '#00aa7f'},
        //                         name:'供气设备'
        //                     },
        //                     {
        //                         value:DevCount,
        //                         itemStyle: {color: '#ffc000'},
        //                         name:'灭火器'
        //                     },
        //                     {
        //                         value:DevCount,
        //                         itemStyle: {color: '#f84f16'},
        //                         name:'燃气罐'
        //                     },
        //                 ],
        //                 roseType: 'angle',
        //                 itemStyle: {
        //                     // 阴影的大小
        //                     shadowBlur: 200,
        //                     // 阴影水平方向上的偏移
        //                     shadowOffsetX: 0,
        //                     // 阴影垂直方向上的偏移
        //                     shadowOffsetY: 0,
        //                     // 阴影颜色
        //                     shadowColor: 'rgb(254,255,240)'
        //                 },
        //                 animationType: 'scale',
        //                 animationEasing: 'elasticOut',
        //                 animationDelay: function (idx) {
        //                     return Math.random() * 200;
        //                 }
        //             }
        //         ]
        //     })
        // }
    });

</script>
</body>
</html>